<template>
	<view>
		<view class="bottom-fixed-wrap">
			<view class="flex-1 flex-c" @click="favorite">
				<image v-if="detail.like" :src="imgBaseUrl + 'icon-like-fill.png'" class="icon-40" />
				<image v-else :src="imgBaseUrl + 'icon-like.png'" class="icon-40" />
				<text class="ml-12 fs-28">{{ detail.like_count }}</text>
			</view>
			<view class="flex-1 flex-c" @click="showRelateProducts">
				<image :src="imgBaseUrl + 'icon-product.png'" class="icon-40" />
				<text class="ml-12 fs-28">商品</text>
			</view>
			<view class="flex-1 flex-c" @click="shareShop">
				<image :src="imgBaseUrl + 'icon-share-black.png'" class="icon-40" />
				<text class="ml-12 fs-28">分享</text>
			</view>
		</view>
		<relate-products v-model="showRelatePopup" :detail="detail" />
		<zjy-share v-model:value="showSharePopup" :shareTypes="['wx', 'timeline']" />
	</view>
</template>
<script setup lang="ts">
import { $articleCancelFavorite, $articleFavorite } from "@/api/feed/note"
import relateProducts from "./relate-products.vue"

const props = defineProps({
	detail: {
		type: Object,
		default: {},
	},
})
const imgBaseUrl = inject("imgBaseUrl")
const showRelatePopup = ref(false)
const showSharePopup = ref(false)
const shareShop = () => {
	showSharePopup.value = true
}
const favorite = () => {
	let { id, like } = props.detail.value
	if (like) {
		//取消点赞
		$articleCancelFavorite(id).then(() => {
			props.detail.value.like = false
			props.detail.value.like_count--
			uni.$emit("articleFavorite", { id, favorite: false })
		})
	} else {
		//点赞
		$articleFavorite(id).then(() => {
			props.detail.value.like = true
			props.detail.value.like_count++
			uni.$emit("articleFavorite", { id, favorite: true })
		})
	}
}
const showRelateProducts = () => {
	showRelatePopup.value = true
}
</script>
<style lang="scss" scoped></style>
